<template>
                <div class="container">
                    <div class="crumbs">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item>
                                <i class="el-icon-lx-calendar"></i> 股东基本信息
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="form-box">
                        <el-form :model="formPartner" :rules="formPartnerRules" ref="formPartner" label-width="80px" class="demo-ruleForm">
                            <el-form-item label="姓名" required prop="partnerName">
                                <el-input v-model="formPartner.partnerName"></el-input>
                            </el-form-item>
                            <el-form-item label="地址" required prop="opstionAddress">
                                <area-cascader   v-model="formPartner.opstionAddress" :data="$pcaa" type="text" :level="1"></area-cascader>
                            </el-form-item>
                            <el-form-item label="民族" required prop="nation">
                                <!-- <el-input v-model="formPartner.nation" prop="partnerName"></el-input>-->
                                <el-select v-model="formPartner.nation" placeholder="民族" class="handle-select mr10"  >
                                    <el-option  label="请选择民族" value=""></el-option>
                                    <el-option
                                            v-for="(item,index) in nationList"
                                            :key="index+'1'"
                                            :value="item.name"
                                            :label="item.name"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="性别" required prop="sex">
                                <el-select v-model="formPartner.sex" placeholder="性别" class="handle-select mr10">
                                    <el-option key="1" label="请选择性别" value=""></el-option>
                                    <el-option key="2" label=" 男" value="0"></el-option>
                                    <el-option key="3" label="女" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学历">
                                <el-select v-model="formPartner.education" placeholder="学历" class="handle-select mr10">
                                    <el-option key="1" label="请选择学历" value=""></el-option>
                                    <el-option key="2" label=" 学士" value="学士"></el-option>
                                    <el-option key="3" label="硕士" value="硕士"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="身份证号" required prop="identification">
                                <el-input v-model="formPartner.identification"  prop="identification"></el-input>
                            </el-form-item>
                            <el-form-item label="党派">
                                <el-input v-model="formPartner.organization" ></el-input>
                            </el-form-item>
                            <el-form-item  label="曾用名">
                                <el-input v-model="formPartner.oldName"></el-input>
                            </el-form-item>
                            <el-form-item  label="英文名">
                                <el-input v-model="formPartner.englishName"></el-input>
                            </el-form-item>
                            <el-form-item label="简介" required prop="briefIntroduction">
                                <el-input type="textarea" rows="5" v-model="formPartner.briefIntroduction"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click=" resetForm('formPartner')">取 消</el-button>
                                <el-button type="primary" @click="saveEdit('formPartner')">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

</template>

<script>
    import Vue from 'vue';
    import { pcaa } from 'area-data-vue';
    import 'area-linkage-vue/dist/index.css';
    import AreaLinkageVue from 'area-linkage-vue';
    Vue.prototype.$pcaa = pcaa;
    Vue.use(AreaLinkageVue)
    export default {
        name: "PartnerEditor",
        data() {
            /**
             * 身份证号校验
             */
            var identi =(rule, value, callback) => {
                //身份证号的正则：/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i
                const reg =/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
                if (!value) {
                    return callback(new Error('身份证号不能为空'))
                }
                setTimeout(() => {
                    if (reg.test(value.trim())) {
                    //获取计算后出生日期
                    var birthDateStr = this.getBirthdayFromIdCard(value);
                    //获取当前的日期
                    var nowDateStr = this.getNowDate();
                    //获取计算后年龄(两个日期之间)
                    var age = this.getAge(birthDateStr, nowDateStr);
                    if(age >= 18){
                        callback()
                    }else {
                        callback(new Error('您为抵达合法年龄'))
                    }

                } else {
                    callback(new Error('请输入正确的身份证号'))
                }
            }, 100)
            }
            return {
                formPartner:{
                    partnerName: "",
                    opstionAddress: [],
                    nation: "",
                    sex: "",
                    education: "",
                    birthday: "",
                    organization: "",
                    englishName: "",
                    oldName: "",
                    briefIntroduction:"",
                    address:"",
                    identification:"",
                    b:""
                },
                formPartnerRules: {
                    partnerName: [
                        { required: true, message: '请输入法人名称', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    nation: [
                        { required: true, message: '请选择民族', trigger: 'change' }
                    ],
                    opstionAddress: [
                        { required: true, message: '请选择地址', trigger: 'change' }
                    ],
                    identification: [
                        {  required: true,validator:identi, message: '填写正确的身份证号', trigger: 'blur' }
                    ],
                    briefIntroduction:[
                        { required: true, message: '请输入个人简介', trigger: 'blur' }
                    ]
                },
                nationList:{}
            }
        },
    created() {
        this.getNationList();
    },
        methods: {
            saveEdit(formName) {
                const  _this =this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.formPartner.birthday=_this.getBirthdayFromIdCard( _this.formPartner.identification);
                        _this.formPartner.address = _this.formPartner.opstionAddress[1] + _this.formPartner.opstionAddress[2];
                        _this.formPartner.b= _this.formPartner.opstionAddress.toString();
                        _this.$axios.post("/partner/saveEdit",_this.formPartner).then(res => {
                    });
                        this.editVisible = false;
                    } else {
                        console.log('error submit!!');
                return false;
            }
            });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.editVisible = false;
            },
            getNationList() {
                const _this = this;
                _this.$axios.get("/utils/nationList").then(res => {
                    _this.nationList =res.data.data.data;


            });
            },
        getBirthdayFromIdCard(idCard) {
            var birthday = "";
            if(idCard != null && idCard != ""){
                if(idCard.length == 15){
                    birthday = "19"+idCard.substr(6,6);
                } else if(idCard.length == 18){
                    birthday = idCard.substr(6,8);
                }
                birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");
            }
            return birthday;
        },
        //获取当前日期
        getNowDate() {
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var day = d.getDate();
            var dateStr = year + '-' + this.getFormatDate(month) + '-' + this.getFormatDate(day);
            return dateStr;
        },
        //格式化日期的月份或天数的显示（小于10，在前面增加0）
        getFormatDate(value) {
            if (value == undefined || value == "") {
                return '';
            }
            var str = value;
            if (parseInt(value) < 10) {
                str = '0' + value;
            }
            return str;
        },
        //根据两个日期计算年龄（是否过生日）
        getAge(startDateStr, endDateStr)
        {
            //计算两个日期相差多少年
            var startDate = new Date(startDateStr);
            var endDate = new Date(endDateStr);
            var yearNum = endDate.getFullYear() - startDate.getFullYear();
            //获取两个日期（月+日）部分
            var sStr = startDateStr.substring(5, 10);
            var eStr = endDateStr.substring(5, 10);
            //判断两个日期大小
            //判断是否过生日
            if (new Date(sStr) <= new Date(eStr)) {
                return yearNum + 1;
            }
            else {
                return yearNum;
            }
        }
        },

    }
</script>

<style scoped>

</style>